<template>
  <div class="home">
    <img alt="Vue logo"
         src="../assets/logo.png">
    <h1>数字：{{$store.state.num}}</h1>
    <h1>getters:{{$store.getters.douNum}}</h1>
    <h1>分模块:{{$store.state.CartStore.cartnum}}</h1>
    <button @click="can()">触发mutations</button>
    <button @click="edit()">使用mutations修改分模块中的数据</button>
    <button @click="actEdit()">使用actions 触发分模块的方法</button>
  </div>
</template>

<script>
import { getVeri } from '../api/common'
export default {
  name: 'Home',
  data () {
    return {}
  },
  computed: {},
  created () {
    getVeri().then(res => {
      console.log(res)
    })
  },
  methods: {
    run () { },
    can () {
      // 触发vuex中的mutations  修改state中的num 每次加5
      this.$store.commit("changenum", 5)
    },
    edit () {
      // 触发分模块中的mutations的方法
      this.$store.commit("CartStore/changeCartNum", 2)
    },
    actEdit () {
      // 触发分模块中的actions的方法
      this.$store.dispatch("CartStore/cartAction", 4)
    }
  }
}
</script>
